<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_径向渐变</title>
</head>
<style>
  .box{
    width: 300px;
    height: 200px;
    border: 1px solid black;
    float: left;
    margin-left: 50px;
    font-size: 25px;
  }
  .box1{
    background-image: radial-gradient(red,yellow,green);
  }

  .box2{
    background-image: radial-gradient(at left top  ,red,yellow,green);
  }

  .box3{
    background-image: radial-gradient(at 100px 50px  ,red,yellow,green);
  }

  .box4{
    background-image: radial-gradient(circle  ,red,yellow,green);
  }
  .box5{
    background-image: radial-gradient(200px 200px  ,red,yellow,green);
  }

  .box6{
    background-image: radial-gradient(red 50px,yellow 100px,green 150px);
  }

  .box7{
    background-image: radial-gradient(100px 50px at 100px 80px,red 50px,yellow 100px,green 150px);
  }

  

</style>
<body>
  

  <div class="box box1">默认情况（从中心到四周）</div>
  <div class="box box2">通过关键词调整径向渐变圆的圆心</div>
  <div class="box box3">通过像素值调整径向渐变圆的圆心</div>
  <div class="box box4">通过circle关键字调整径向渐变圆为正圆</div>
  <div class="box box5">通过像素值调整径向渐变圆为正圆</div>
  <div class="box box6">调整径向渐变的区域</div>
  <div class="box box7">综合写法</div>


</body>
</html>